<template>
  <sys-dialog
      :title="dialog.title"
      :width="dialog.width"
      :height="dialog.height"
      :visible="dialog.visible"
      @onClose="onClose"
      @onConfirm="confirm"
  >
    <template #content>
      <a-tree
          :fieldNames="fieldNames"
          :show-line="showLine"
          :tree-data="treeData"
          @select="onSelect"
      ></a-tree>
    </template>
  </sys-dialog>
</template>

<script setup lang="ts">
import useDialog from '@/hooks/useDialog';
import {ref, reactive, onMounted, computed} from 'vue'
import type { TreeProps } from 'ant-design-vue';
import useParent from "@/composable/menu/useParent";
import {message} from "ant-design-vue";
import SysDialog from "@/components/SysDialog.vue";

const { dialog, onClose, onShow } = useDialog()
const { showLine, treeData, fieldNames } = useParent()
const selectedNode = reactive<TreeNode>({
  parentId: '',
  parentName: ''
});
//显示弹框
const show = () => {
  dialog.title = '选择上级菜单'
  dialog.height = 450;
  dialog.width = 300
  onShow()
}
defineExpose({
  show
})


//注册事件
const emit = defineEmits(['selectId'])

const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
  selectedNode.parentId = selectedKeys[0] as string
  selectedNode.parentName = info.node.title
};

//确定
const confirm = () => {
  if (!selectedNode.parentName) {
    message.error('请选择上级菜单')
    return;
  }
  emit('selectId', selectedNode)
  onClose()
}
</script>

<style scoped lang="scss">

</style>
